<template>
  <el-dialog
    title="佣金设置"
    class="setupdia"
    :visible.sync="syncCommissionDialog"
    width="730px"
  >
    <el-form ref="form" label-width="80px">
      <el-form-item label="佣金规则:">
        <template v-for="(item, i) of list">
          <el-row
            v-if="!item.deleted"
            :key="i"
            class="commission__row"
            style="margin-bottom: 10px"
          >
            <el-col :span="9">
              <el-row>
                <el-col :span="8">
                  <el-input-number
                    :min="0"
                    :controls="false"
                    v-model="item.orderStart"
                    @blur="verificationGropEnd($event, i)"
                    class="input__number"
                  ></el-input-number>
                </el-col>
                <el-col :span="2">
                  <span style="margin-left: 8px">-</span>
                </el-col>
                <el-col :span="12">
                  <el-input-number
                    :min="0"
                    :controls="false"
                    v-model="item.orderEnd"
                    style="width: 90px"
                    @focus="onFocus"
                    @blur="verificationGropEnd($event, i)"
                    :clearable="list.length - 1 === i"
                    class="input__number"
                  ></el-input-number
                  >单
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="15">
              <el-row :gutter="10">
                <el-col :span="20">
                  <el-form label-width="180px">
                    <el-form-item label="每单:" required>
                      <el-input-number
                        :min="0"
                        :controls="false"
                        v-model="item.unitAmount"
                        @focus="onFocus"
                        style="width: 100px"
                        @blur="verificationGropLen($event, i)"
                        class="input__len"
                      ></el-input-number
                      >元
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="4">
                  <span class="del__btn">
                    <el-link
                      type="danger"
                      :underline="false"
                      @click="handleDelItem(item, i)"
                      >删除</el-link
                    >
                  </span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-form-item>
      <el-form-item>
        <el-link @click="handleAddItem" type="primary" :underline="false"
          >添加</el-link
        >
      </el-form-item>
    </el-form>
    <div class="setupfooter">
      <el-button @click="syncCommissionDialog = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, PropSync, Watch, Prop } from "vue-property-decorator";
import cloneDeep from "lodash/cloneDeep";

@Component
export default class CommissionSetUp extends Vue {
  /** 佣金设置弹框 */
  @PropSync("commissionDialog", { type: Boolean, default: false })
  syncCommissionDialog: boolean;

  @Prop({
    default() {
      return [];
    },
  })
  value: any[];

  list = [];

  /** 本地值 表单验证用 */
  localValue = "";

  @Watch("syncCommissionDialog", { immediate: true })
  handleChange(v) {
    if (v) {
      const list = this.value.map((item) => {
        item.deleted = false;
        return item;
      });
      list[list.length - 1].orderEnd = "无穷大";
      this.list = list;
    }
  }

  /** 增加奖励规则 */
  handleAddItem() {
    if (this.list.length >= 10) {
      return this.$message.info("最多十条记录");
    }
    const end = this.list[this.list.length - 1].orderEnd as any;

    if (end === "无穷大") {
      return this.$message.info("最后一条规则已是无穷大");
    }

    this.list.push({
      unitAmount: 1,
      orderEnd: "无穷大",
      orderStart: +end + 1,
      deleted: false,
    });
  }

  /** 删除奖励规则条目 */
  handleDelItem(item: any, i) {
    this.list.splice(i, 1);
    // this.$set(this.list, i, Object.assign({}, this.list[i], { deleted: true }));
    // item.deleted = true;
  }

  onFocus(e) {
    this.localValue = e.target.value;
  }

  /** 失焦验证佣金区间值 */
  verificationGropEnd(e, i) {
    return;
    const salesEnd = e.target.value;
    // 首位规则
    if (i === 0 && this.list[1]) {
      if (salesEnd <= this.list[1].salesStart) {
        this.$set(this.list, i, { ...this.list[i], salesEnd: this.localValue });
        return this.$message.info("输入的值不可小于下一条值的初始值");
      }
    }
    if (i !== 0 && this.list.length - 1 === i) {
      if (salesEnd <= this.list[i].salesStart) {
        this.$set(this.list, i, { ...this.list[i], salesEnd: this.localValue });
        return this.$message.info("输入的值不可小于当前初始值");
      }
    }
  }

  /** 失焦验证佣金比例 */
  verificationGropLen(e, i) {
    console.log(e, i);
  }

  save() {
    const list = cloneDeep(this.list);

    if (list[list.length - 1].orderEnd !== "无穷大") {
      return this.$message.warning("必须以无穷大结尾");
    }

    list[list.length - 1].orderEnd = "-1";

    const emptyItem = list.find(
      (item) =>
        !item.unitAmount ||
        !item.orderEnd ||
        (!item.orderStart && +item.orderStart !== 0),
    );

    if (emptyItem) {
      return this.$message.warning("规则设置不能为空");
    }

    this.syncCommissionDialog = false;
    this.$emit("save", list);
  }
}
</script>

<style lang="scss">
.commission__row {
  .del__btn {
    display: none;
  }

  &:last-child .el-col .del__btn {
    display: block;
  }
}
</style>
